<template>
    <section style="padding: 24px; background:#fff;">
     <div class="table-operator">
            <a-select show-search placeholder="图片来源" style="width: 200px;margin-bottom:10px" option-filter-prop="children" @change="changeOriginal" v-model="original">
                <a-select-option v-for="(item,index) in originalList" :key="index" :value="item.dicCode">{{item.dicValue}}</a-select-option>
            </a-select>
            <a-button @click="searchReset">重置</a-button>
       </div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
        selectedRowKeys.length }}</a>项&nbsp;&nbsp;
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>
        <a-table ref="table" bordered :loading='loading' :columns="columns" rowKey="id" :data-source="tbList" :pagination="ipagination" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange">
            <span slot="image" slot-scope="path">
                <img :src="path" width="150" height="80">
            </span>
            <span slot="action" slot-scope="text, record">
                <a-popconfirm cancelText='取消' okText='确定' title="确定删除吗?" @confirm="() => handleDelete(record.id)" placement="topLeft">
                    <a>删除</a>
                </a-popconfirm>
            </span>
        </a-table>
    </section>
</template>
<script>
import { listImages, deleteImageById } from '@/api/api'
import {isEmpty} from '@/util/util'
const columns = [
    {
        title: '序号',
        dataIndex: '',
        key: 'rowIndex',
        align: 'center',
        customRender: function (t, r, index) {
            return parseInt(index) + 1
        },
        width: 40
    },
    {
        title: '图片',
        dataIndex: 'path',
        align: 'center',
        width: 100,
        scopedSlots: { customRender: 'image' },
    },
    {
        title: '图片类型',
        dataIndex: 'contentType',
        align: 'center',
        width: 70
    },
    {
        title: '图片名称',
        dataIndex: 'name',
        align: 'center',
        width: 100,
        ellipsis: true,

    },
    {
        title: '来源',
        dataIndex: 'original',
        align: 'center',
        customRender(text) {
            if (text == 'article') {
                return '文章';
            } else if (text == 'loop') {
                return '轮播图';
            } else if (text == 'link') {
                return '友情链接'
            }else if(text == 'avatar'){
                return '头像'
            }
        },
        width: 30

    },
    {
        title: '状态',
        dataIndex: 'state',
        align: 'center',
        customRender(text) {
            if (text == '1') {
                return '正常';
            } else if (text == '0') {
                return '删除';
            }
        },
        width: 50
    },
    {
        title: '创建日期',
        align: "center",
        width: 80,
        dataIndex: 'createTime',
    },
    {
        title: '更新日期',
        align: "center",
        width: 80,
        dataIndex: 'updateTime',
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        align: "center",
        width: 50
    }
];
export default {
    data() {
        return {
            selectedRowKeys: [],
            columns,
            tbList: [],
            loading: false,
            original: undefined,//来源
            originalList: [
                {
                    dicCode: 'avatar',
                    dicValue: '头像'
                },
                {
                    dicCode: 'article',
                    dicValue: '文章'
                },
                {
                    dicCode: 'loop',
                    dicValue: '轮播图'
                },
                {
                    dicCode: 'link',
                    dicValue: '友情链接'
                }
            ],
            /* 分页参数 */
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
        }
    },
    methods: {
        getData(arg) {
            //加载数据 若传入参数1则加载第一页的内容
            if (arg === 1) {
                this.ipagination.current = 1;
            }
            this.loading = true;
            listImages(this.ipagination.current, this.ipagination.pageSize, isEmpty(this.original)).then(res => {
                if (res.code === 200) {
                    this.loading = false;
                    this.tbList = res.data.records;
                    this.ipagination.total = res.data.total ? res.data.total : 0;
                }
            })
        },
        changeOriginal() {
            this.getData(1);
        },
        handleTableChange(pagination, filters, sorter) {
            this.ipagination = pagination;
            this.getData();
        },
        handleDelete(record) {
            deleteImageById(record).then(res => {
                if (res.code === 200) {
                    this.$message.success("操作成功!");
                    this.getData();
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        onClearSelected() {
            this.selectedRowKeys = [];
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        searchReset(){
            this.original=undefined;
            this.getData();
        }
    },
    mounted() {
        this.getData(1);
    },
}
</script>